<template>
	<view>
		<image :src="data.thumb" class="thumb" />
		<view class="intr">
			<view>{{data.title}}</view>
			<view @click="callUp" :data-tel="data.tel">
				<view data-msg="咨询电话: ">{{data.tel}}</view>
				<image src="https://new.kuxia.top/uploads/image/20220930/25424a1013d546510d545d6b7e9c68ab.png" />
			</view>
			<view></view>
		</view>
		<view v-html="data.content" class="content"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: ''
			}
		},
		onLoad() {
			this.callback();
		},
		methods: {
			callback() {
				console.log(uni.getStorageSync('hospitalIntr'));
				this.data = uni.getStorageSync('hospitalIntr');
			},
			callUp(event) {
				console.log(event.currentTarget.dataset.tel);
				uni.makePhoneCall({
					phoneNumber: event.currentTarget.dataset.tel
				})
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 400)
				this.callback();
			}, 300)
		}
	}
</script>

<style lang="scss">
	.thumb {
		height: 22vh;
		width: 100%;
		display: block;
	}

	.intr {
		width: 95%;
		margin: 1vh auto;

		>view {
			&:first-child {
				font-size: 18px;
				margin-bottom: 2vh;
			}

			&:nth-child(2) {
				display: flex;
				justify-content: space-between;
				font-size: 15px;
				margin-bottom: 1vh;
				align-items: center;

				>view:first-child::before {
					content: attr(data-msg);
					font-size: 16px;
				}

				>image {
					width: 6.5vw;
					height: 6.5vw;
				}
			}

			&:last-child {
				height: 1px;
				width: 100%;
				background: #c0c0c0;
			}

		}
	}

	.content {
		width: 95%;
		margin: 2vh auto;
		overflow: hidden;
		text-indent: 2em;
		font-weight: 300;
	}
</style>
